<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动解禁方案</title>
</head>
<style>

    /*缺陷：使用了伪元素选择器后，不能在插入的这个伪元素前面出现没浮动的块级元素*/

    .all{
        background-color: gray;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        float: left;
    }
    .box1{
        background-color: pink;
    }
    .box2{
        background-color: aqua;
    }
    .box3{
        background-color: aquamarine;
    }
    /*::after 是一个伪元素选择器，表示在所选元素的内容后插入一个伪元素。
    content 属性指定了伪元素的内容为空字符串，也就是没有具体内容要插入。
    display 属性设置伪元素的显示方式为块级元素，使其在元素内容的后面单独占据一行。
    clear 属性用于控制元素周围的浮动元素对其的影响。clear: both; 表示元素下方不允许有浮动元素，
    它会清除元素前面的浮动元素。*/
    .all::after{
        content: "";
        display: block;
        clear: both;
    }
    /* 伪元素选择器 选中的是div中的第一个文字 */
    .last::first-letter {
        color: red;
        font-size: 40px;
    }
    /* 伪元素选择器 选中的是div中的第一行文字 */
    .last::first-line {
        background-color: yellow;
    }
</style>
<body>
<div class="all">
    <div class="content box1">1</div>
    <div class="content box2">2</div>
    <div class="content box3">3</div>
    <div class="content box4">4</div>
</div>
<div class="last">Lorem324684484654987987 ipsum dolor sit amet, consectetur adipisicing elit. Amet aut autem commodi et, ex inventore omnis porro quisquam. Sit, tenetur.</div>

</body>
</html>